<template>
  <div id="app" class="main-wrapper"><textarea v-model="value"></textarea>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker7">单列</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker0">多列</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker1">联级</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker4">区域</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker2">时间(内置)</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker3">日期(内置)</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker5">别名显示</lbr-button>
    <lbr-button type="primary" style="margin-top: 10px;" @click="showPicker6">联级别名显示</lbr-button>

    <lbr-picker
        ref="picker7"
        :textTitle="picker7.textTitle"
        :data="picker7.data"
        :anchor="picker7.anchor"
        @confirm="handlePicker7Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker0"
        :textTitle="picker0.textTitle"
        :data="picker0.data"
        :anchor="picker0.anchor"
        @confirm="handlePicker0Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker1"
        :textTitle="picker1.textTitle"
        :data="picker1.data"
        :anchor="picker1.anchor"
        @confirm="handlePicker1Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker2"
        :textTitle="picker2.textTitle"
        :type="picker2.type"
        :anchor="picker2.anchor"
        @confirm="handlePicker2Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker3"
        :textTitle="picker3.textTitle"
        :type="picker3.type"
        :anchor="picker3.anchor"
        @confirm="handlePicker3Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker4"
        :textTitle="picker4.textTitle"
        :data="picker4.data"
        :anchor="picker4.anchor"
        @confirm="handlePicker4Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker5"
        :textTitle="picker5.textTitle"
        :data="picker5.data"
        :anchor="picker5.anchor"
        @confirm="handlePicker5Confirm">
    </lbr-picker>
    <lbr-picker
        ref="picker6"
        :textTitle="picker6.textTitle"
        :data="picker6.data"
        :anchor="picker6.anchor"
        @confirm="handlePicker6Confirm">
    </lbr-picker>
  </div>
</template>
<script>
import areaData from './area.js'

const data1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
const data2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
export default {
  name: 'app',
  data() {
    return {
      value: null,
      picker7: {
        anchor: [],
        textTitle: '单列选择器',
        data: [data1]
      },
      picker0: {
        anchor: [],
        textTitle: '多列选择器',
        data: [data1, data2]
      },
      picker1: {
        anchor: [{value: 'C', value: 'C-b'}],
        textTitle: '联级选择器',
        data: [{
          value: 'A',
          children: [{
            value: 'A-a'
          }, {
            value: 'A-b'
          }, {
            value: 'A-c'
          }]
        }, {
          value: 'B',
          children: [{
            value: 'B-a'
          }, {
            value: 'B-b'
          }]
        }, {
          value: 'C',
          children: [{
            value: 'C-a'
          }, {
            value: 'C-b'
          }, {
            value: 'C-c'
          }, {
            value: 'C-d'
          }]
        }, {
          value: 'D',
          children: [{
            value: 'D-a'
          }]
        }]
      },
      picker2: {
        anchor: [],
        textTitle: '时间选择器(内置)',
        type: 'time'
      },
      picker3: {
        anchor: [],
        textTitle: '日期选择器(内置)',
        type: 'date'
      },
      picker4: {
        anchor: [],
        textTitle: '区域选择器',
        data: areaData
      },
      picker5: {
        anchor: [{value: 13}, 2],
        textTitle: '别名选择器',
        data: [
          [
            {
              value: '11',
              label: '一一'
            },
            {
              value: '12',
              label: '一二'
            },
            {
              value: '13',
              label: '一三'
            },
            {
              value: '14',
              label: '一四'
            },
            {
              value: '15',
              label: '一五'
            }
          ],
          [
            {
              value: '21',
              label: '二一'
            },
            {
              value: '22',
              label: '二二'
            },
            {
              value: '23',
              label: '二三'
            },
            {
              value: '24',
              label: '二四'
            },
            {
              value: '25',
              label: '二五'
            }
          ]
        ]
      },
      picker6: {
        anchor: [{value: 'B'}, {value: 'B-b'}],
        textTitle: '联级别名选择器',
        data: [{
          value: 'A',
          label: 'Aa',
          children: [{
            value: 'A-a',
            label: 'A-a-Aa'
          }, {
            value: 'A-b',
            label: 'A-b-Ab'
          }, {
            value: 'A-c',
            label: 'A-c-Ac'
          }]
        }, {
          value: 'B',
          label: 'Bb',
          children: [{
            value: 'B-a',
            label: 'B-a-Ba'
          }, {
            value: 'B-b',
            label: 'B-b-Bb'
          }]
        }, {
          value: 'C',
          label: 'Cc',
          children: [{
            value: 'C-a',
            label: 'C-a-Ca'
          }, {
            value: 'C-b',
            label: 'C-b-Cb'
          }, {
            value: 'C-c',
            label: 'C-c-Cc'
          }, {
            value: 'C-d',
            label: 'C-d-Cd'
          }]
        }, {
          value: 'D',
          label: 'Dd',
          children: [{
            value: 'D-a',
            label: 'D-a-Da'
          }]
        }]
      },
    }
  },
  methods: {
    showPicker7() {
      this.$refs.picker7.show()
    },
    handlePicker7Confirm(v) {
      this.picker7.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker0() {
      this.$refs.picker0.show()
    },

    handlePicker0Confirm(v) {
      this.picker0.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker1() {
      this.$refs.picker1.show()
    },
    handlePicker1Confirm(v) {
      this.picker1.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker2() {
      this.$refs.picker2.show()
    },
    handlePicker2Confirm(v) {
      this.picker2.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker3() {
      this.$refs.picker3.show()
    },
    handlePicker3Confirm(v) {
      this.picker3.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker4() {
      this.$refs.picker4.show()
    },
    handlePicker4Confirm(v) {
      this.picker4.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker5() {
      this.$refs.picker5.show()
    },
    handlePicker5Confirm(v) {
      this.picker5.anchor = v
      this.value = v ? JSON.stringify(v) : null
    },
    showPicker6() {
      this.$refs.picker6.show()
    },
    handlePicker6Confirm(v) {
      this.picker6.anchor = v
      this.value = v ? JSON.stringify(v) : null
    }
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  padding: 12px;
}

textarea {
  height: 88px;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border: 2px solid #35495d;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  color: #35495d;
  font-size: 14px;
  resize: none;
}

.btn {
  width: 100%;
  height: 44px;
  margin-bottom: 12px;
  line-height: 44px;
  text-align: center;
  color: #fff;
  background: #42b983;
}
</style>
